<template>
  <div class="environment-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">环境与卫生管理</h2>
      </div>
    </div>

    <div class="content">
      <!-- 功能卡片区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToCleanApply">
            <div class="card-header">
              <i class="el-icon-brush"></i>
              <span>清洁申请</span>
            </div>
            <div class="card-content">
              <p>提交清洁服务申请，包括日常保洁、专项清洁等服务。</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 日常保洁</li>
                <li><i class="el-icon-check"></i> 专项清洁</li>
                <li><i class="el-icon-check"></i> 应急清洁</li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToDisinfectApply">
            <div class="card-header">
              <i class="el-icon-magic-stick"></i>
              <span>消杀申请</span>
            </div>
            <div class="card-content">
              <p>提交消毒杀菌服务申请，包括常规消杀、专业消杀等服务。</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 常规消杀</li>
                <li><i class="el-icon-check"></i> 专业消杀</li>
                <li><i class="el-icon-check"></i> 紧急处理</li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToGreenApply">
            <div class="card-header">
              <i class="el-icon-tree"></i>
              <span>绿化养护</span>
            </div>
            <div class="card-content">
              <p>提交绿化养护服务申请，包括植物养护、景观维护等服务。</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 植物养护</li>
                <li><i class="el-icon-check"></i> 景观维护</li>
                <li><i class="el-icon-check"></i> 绿化改造</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 申请记录列表 -->
      <div class="application-list">
        <div class="list-header">
          <h3>申请记录</h3>
          <div class="header-actions">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索申请记录"
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearch"
              @keyup.enter.native="handleSearch">
            </el-input>
          </div>
        </div>

        <el-table
          :data="applicationList"
          v-loading="loading"
          style="width: 100%">
          <el-table-column
            prop="applyNo"
            label="申请编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="type"
            label="申请类型"
            width="120">
            <template slot-scope="scope">
              {{ getTypeText(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="viewDetail(scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnvironmentProcess',
  data() {
    return {
      loading: false,
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      applicationList: []
    }
  },
  methods: {
    goToCleanApply() {
      try {
        this.$router.push('/main/huanjing/clean/apply')
      } catch (error) {
        console.error('导航失败:', error)
        this.$message.error('页面跳转失败，请稍后重试')
      }
    },
    goToDisinfectApply() {
      try {
        this.$router.push('/main/huanjing/disinfect/apply')
      } catch (error) {
        console.error('导航失败:', error)
        this.$message.error('页面跳转失败，请稍后重试')
      }
    },
    goToGreenApply() {
      try {
        this.$router.push('/main/huanjing/green/apply')
      } catch (error) {
        console.error('导航失败:', error)
        this.$message.error('页面跳转失败，请稍后重试')
      }
    },
    async fetchApplicationList() {
      this.loading = true
      try {
        const response = await this.$http.get('/api/environment/applications', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            keyword: this.searchKeyword
          }
        })
        this.applicationList = response.data.records
        this.total = response.data.total
      } catch (error) {
        this.$message.error('获取申请记录失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.currentPage = 1
      // this.fetchApplicationList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.fetchApplicationList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // this.fetchApplicationList()
    },
    viewDetail(row) {
      this.$router.push(`/main/huanjing/${row.type}/detail/${row.id}`)
    },
    getTypeText(type) {
      const typeMap = {
        clean: '清洁申请',
        disinfect: '消杀申请',
        green: '绿化养护'
      }
      return typeMap[type] || type
    },
    getStatusType(status) {
      const statusMap = {
        pending: 'warning',
        processing: 'primary',
        completed: 'success',
        rejected: 'danger'
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成',
        rejected: '已拒绝'
      }
      return statusMap[status] || status
    }
  },
  created() {
    // this.fetchApplicationList()
  }
}
</script>

<style lang="scss" scoped>
.environment-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }
  }

  .content {
    .function-card {
      height: 100%;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        i {
          font-size: 24px;
          color: #409EFF;
          margin-right: 10px;
        }

        span {
          font-size: 18px;
          color: #303133;
          font-weight: 500;
        }
      }

      .card-content {
        p {
          margin: 0 0 15px;
          color: #606266;
          line-height: 1.5;
        }

        .feature-list {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            color: #606266;

            i {
              color: #67C23A;
              margin-right: 8px;
            }
          }
        }
      }
    }

    .application-list {
      margin-top: 30px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }

        .header-actions {
          .el-input {
            width: 200px;
          }
        }
      }

      .pagination {
        margin-top: 20px;
        text-align: right;
      }
    }
  }
}
</style> 